<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui1/dist/css/layui.css"  media="all">
    <script src="../res/layui1/dist/layui.js" charset="utf-8"></script>
    <script src="../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //全局同步
        $.ajaxSetup({
            async: false
        });
        function getQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;}
        var id = getQueryString("id");
    </script>
</head>
<body>
<form class="layui-form" action="" id="AtsDataSport">
    <input type="hidden" name="sportId" id="sportId" value="0"/>
    <input type="hidden" name="ids" id="ids" value="0"/>
    <div class="layui-form-item">
        <label class="layui-form-label">项目名称：</label>
        <div class="layui-input-block">
            <input type="text" name="sportName" id="sportName" required
                   lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">项目说明：</label>
        <div class="layui-input-block">
            <input type="text" name="sportExp" id="sportExp" required
                   lay-verify="required" placeholder="请输入项目说明" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色模块</label>
        <div class="layui-input-block">
            <div id="test12" class="demo-tree-more"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注：</label>
        <div class="layui-input-block">
            <input type="text" name="remark" id="remark" required
                   lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div style="margin-left: 110px;margin-top: 10px;  ">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<script>
    layui.use(['form', 'layedit', 'laydate','tree','util'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        var tree = layui.tree, layer = layui.layer, util = layui.util;

        //此方法为转型
        function transData(a, idStr, pidStr, chindrenStr) {
            var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
            for (; i < len; i++) {
                hash[a[i][id]] = a[i];
            }
            for (; j < len; j++) {
                var aVal = a[j], hashVP = hash[aVal[pid]];
                if (hashVP) {
                    !hashVP[children] && (hashVP[children] = []);
                    hashVP[children].push(aVal);
                } else {
                    r.push(aVal);
                }
            }
            return r;
        }

        var jsondata = "";
        findAll();


        function findAll() {
            //将下拉框新闻类型赋值
            var url = "../AtsBaseItem/selectItem";
            var data = {};
            //jquery的ajax方法,查询新闻类型的方法
            $.post(url, data, function(obj) {
                //从后台传过来的数据obj
                //$("#flowerName").val(obj.fname);
                //$("#flowerprice").val(obj.funitprice);
                //$("#flowersl").val(obj.fcount);
                //$("#flowerId").val(id);
                //重新渲染
                //form.render();
                //基本演示
                jsondata = obj;
                var jsonDataTree = transData(jsondata, 'id', 'field', 'children');
                console.log('树形json'+jsonDataTree);
                tree.render({
                    elem : '#test12',
                    data : jsonDataTree,
                    showCheckbox : true //是否显示复选框
                    ,
                    id : 'demoId1',
                    isJump : true //是否允许点击节点时弹出新窗口跳转
                    ,
                    click : function(obj) {
                        //var data = obj.jsonDataTree; //获取当前点击的节点数据
                        layer.msg('状态：' + obj.state + '<br>节点数据：'
                            + JSON.stringify(obj));
                    }
                });

                console.log('json数据' + jsondata);
                console.log('json数据长度' + obj.count);
            }, "json");
        }
        begins();
        function begins(){
            var url = "../AtsBaseItem/selectSp";
            var id = getQueryString("id");
            var data = {id: id};
            $.post(url,data,function(obj){
                console.log('===========树形控件'+obj);
                var xh = [];
                $.each(obj,function(index,item){
                    xh.push(item.itemId);
                });
                /* var selected = new Array();
                selected.push(12);
                console.log('===========array集合'+selected); */
                tree.setChecked('demoId1', xh); //勾选指定节点[4,5,6,12]
            },"json");

        }
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
            var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
            var modIds = "";
            $.each(checkedData,function(index,item){
                $.each(item.children,function(indexs,items){

                    console.log('子模块信息：'+items.pid+items.title+items.id);
                    modIds += items.id + ',';
                });
                modIds+=item.id + ',';
                console.log('父模块信息：'+item.pid+item.title+item.id);
            });
            console.log(modIds);
            $('#ids').val(modIds);
            var treeId =  $("#ids").val();
            if(treeId===0){
                layer.msg("亲1");
            }else {
                layer.msg("亲"+treeId);
                var formData = new FormData(document.getElementById("AtsDataSport"));
                var url = "../AtsBaseSport/intsertUpdate";
                $.ajax({
                    url:url,
                    type:"post",
                    data:formData,
                    processData:false,
                    contentType:false,
                    dataType:"json",
                    success:function(obj){
                        if(obj.num==1){
                            layer.msg(obj.msg, {
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                //关闭当前层
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                //刷新父页面
                                //parent.location.reload();
                            });
                        }else{
                            layer.msg(obj.msg);
                        }
                    },
                    error:function(e){
                        layer.msg("操作错误!");
                    }
                });
            }

            return false;
        });
        fromfz();

    });
    function fromfz() {
        var id = getQueryString("id");
        if(id!=null){
            var url = "../AtsBaseSport/findId";
            var data = {id:id};
            $.get(url, data, function (obj) {
                $("#sportId").val(obj.sportId);
                $("#sportName").val(obj.sportName);
                $("#sportExp").val(obj.sportExp);
                $("#remark").val(obj.remark);
            }, "json");
        }
    }
</script>
</body>
</html>